<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding: 50px;
            font-size: medium;
        }

        .btn {
            display: flex;
        }

        .green {
            background-color: rgb(71, 163, 71);
            color: white;
            height: 25px;
            width: 100px;
            margin-right: 20px;
            padding: 0px 15px;
            border: none;
        }

        .yellow {
            background-color: rgb(255, 187, 0);
            color: white;
            margin-right: 20px;
            height: 25px;
            width: 100px;
            margin-right: 20px;
            padding: 0px 15px;
            border: none;
        }

        .red {
            background-color: rgb(201, 45, 45);
            color: white;
            margin-right: 20px;
            height: 25px;
            width: 100px;
            margin-right: 20px;
            padding: 0px 15px;
            border: none;
        }

        .firstpart {
            display: grid;
            gap: 10px;
            grid-template-columns: 1fr 2fr 1fr 2fr;
        }

        .firstline {
            display: flex;
            margin: 20px 0px;
            flex: 1;
        }

        .secondline {
            display: flex;
            margin: 20px 0px;
        }

        .thridline {
            display: flex;
            margin: 20px 0px;
        }

        .name {
            width: 100px;
        }

        .nameleft {
            display: flex;
            margin-right: 50px;
        }

        .nameright {
            display: flex;
            margin-left: 50px;
        }

        .submit {
            display: flex;
        }

        .minibtn {
            background-color: rgb(21, 121, 187);
            height: 25px;
            width: 100px;
            border: none;
            color: white;
        }

        .one {
            flex: 1;
        }

        .two {
            flex: 1;
        }

        .thridpart {
            display: grid;
            gap: 10px;
            grid-template-columns: 1fr 1fr 1fr;
        }
    </style>
</head>

<body>
    <div>
        <!-- 顶上的三个按钮 -->
        <div class="btn">
            <button class="green">转为客户</button>
            <button class="yellow">编辑</button>
            <button class="red">删除</button>
        </div>
        <!-- 第一个标题-->
        <h2>线索基本信息</h2>
        <!-- 第一块内容 -->
        <div class="firstpart">
            <div>线索名称</div>
            <div>xxxxxx</div>
            <div>负责人</div>
            <div>xxxxxx</div>
            <div>线索来源</div>
            <div>xxxxxx</div>
            <div>联系电话</div>
            <div>xxxxxx</div>
            <div>联系地址</div>
            <div>xxxxxx</div>
            <div>下次联系时间</div>
            <div>xxxxxx</div>
            <div>备注</div>
            <div>xxxxxx</div>
        </div>
        <!-- 第二个标题 -->
        <h2>写跟进</h2>
        <!-- 第二块内容 -->
        <div class="second">
            <div class="firstline">
                <div class="nameleft">
                    <div class="name">跟进时间</div>
                    <input type="datetime-local" name="" id="">
                </div>
                <div class="nameright">
                    <div class="name">跟进方式</div>
                    <select name="" id="">
                        <option value="1">请选择</option>
                        <option value="1">请选择</option>
                    </select>
                </div>
            </div>
            <div class="secondline">
                <div class="name">跟进内容</div>
                <textarea class="one"></textarea>
            </div>
            <div class="thridline">
                <div class="name">下次联系</div>
                <input class="two" type="datetime-local" name="" id="">

            </div>
            <div class="submit">
                <div class="name"> </div>
                <button class="minibtn">提交</button>
            </div>
        </div>
        <!-- 第三个标题 -->
        <h2>跟进记录</h2>
        <!-- 第三块内容 -->
        <div class="thridpart">
            <div>跟进时间</div>
            <div>跟进方式</div>
            <div>跟进记录</div>
            <div>xxxxxx</div>
            <div>xxxxxx</div>
            <div>xxxxxx</div>
            <div>xxxxxx</div>
            <div>xxxxxx</div>
            <div>xxxxxx</div>
            <div>xxxxxx</div>
            <div>xxxxxx</div>
            <div>xxxxxx</div>

        </div>
    </div>
</body>

</html>